<template>
  <div>
    <div class="xian"></div>
    <el-card class="box-card">
      <el-form :inline="true" class="demo-form-inline timeSelect" >
        <el-form-item class="tabBtn">
    <el-button type="primary" @click="excel()">导出</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" class="orderTable orderTable3">
        <el-table-column prop="id" label="id" align="center">
        </el-table-column>
        <el-table-column prop="name" label="姓名" align="center">
        </el-table-column>
        <el-table-column prop="tel" label="手机" align="center">
        </el-table-column>
        <el-table-column prop="createTime" label="创建日期" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.createTime | formatDate}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-view" size="mini" @click.native.prevent="viewMessage(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageBox">
        <el-pagination :page-sizes="[10 ,20, 50, 100, 200, 500]" @size-change="sizeChange" @current-change="currentChange" :current-page.sync="page" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
        </el-pagination>
      </div>
    </el-card>
    <el-dialog title="查看详情" :visible.sync="showView" width="400px">
      <el-row :gutter="20">
  <el-col :span="6">姓名：</el-col>
  <el-col :span="6">{{viewInfo.name}}</el-col>
</el-row>
 <el-row :gutter="20">
  <el-col :span="6">手机</el-col>
  <el-col :span="6">{{viewInfo.tel}}</el-col>
</el-row>

 <el-row :gutter="20" v-if="type==0">
  <el-col :span="6">内容</el-col>
  <el-col :span="6"><div class="content1">{{viewInfo.content}}</div></el-col>
</el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="showView = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { formatDate } from "@/utils/filter.js"
import { findByType, findById } from "@/api/message"

export default {
  data() {
    return {
      type: this.$route.query.type == null ? 0 : this.$route.query.type,
      name: "messageList",
      tableData: [],
      page: 1,
      pageSize: 10,
      totalCount: 0,
      showView:false,
      viewInfo:{}
    }
  },
  created() {
    this.search(1)
  },
  filters: {
    formatDate(time) {
      var data = new Date(time)
      return formatDate(data, "yyyy-MM-dd")
    }
  },
  methods: {
    excel(){
      window.open('/api/message/excels?type='+this.type)
    },
    sizeChange(val) {
      this.pageSize = val
      this.search(1)
    },
    currentChange(val) {
      this.page = val
      this.search(val)
    },
    search(page) {
      findByType(this.type, page, this.pageSize).then(res => {
        this.tableData = res.Data
        this.totalCount = res.TotalCount
      })
    },
    viewMessage(row) {
        this.showView = true
        this.viewInfo = {
          name:row.name,
          tel:row.tel,
          content:row.content
        }
    }
  }
}
</script>
<style lang="scss" scoped>
@media screen and (max-width: 1800px) {
  .timeSelect .el-form-item {
    margin-right: 5px;
  }
  .smallInput {
    max-width: 140px;
  }
}
@media screen and (max-width: 768px) {
  .smallInput {
    max-width: none;
    width: 100%;
  }
}
.content1{
  width:270px;
  word-wrap:break-word; /*连续的数字或者英文就会不换行 得使用强制换行*/
	word-break:break-all; /*连续的数字或者英文就会不换行 得使用强制换行*/
}
</style>
